<template>
    <div class="tips">
        <div class="left">
            <div class="nav">
                <div class="nav-item" :class="{ active: navIndex === 1 }" @click="changeNav(1)">
                    考试列表
                </div>
            </div>
            <div class="student-info">
                <div class="title">考生信息</div>
                <div class="user-info">
                    <div class="avatar"></div>
                    <div class="user-info-text">
                        <div class="line">考号：{{ userStore.getUserinfo.username }}</div>
                        <div class="line">姓名：{{ userStore.getUserinfo.realname }}</div>
                        <div class="line">性别：{{ userStore.getUserinfo.sex }}</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="right">
            <div class="right-header">
                <div class="title">
                    <img class="title-icon" src="@assets/img/exam-list-icon.png" alt="" />
                    考试列表
                </div>
                <!-- <div class="list-search">
                    <el-input class="search-item" placeholder="请输入考试名称"></el-input>
                    <el-button class="search-btn" type="primary">搜索</el-button>
                </div> -->
            </div>
            <div class="right-content">
                <ul class="exam-list">
                    <li v-for="(item, index) in examList" :key="index" class="exam-list-item">
                        <div class="list-left">
                            <div class="exam-title">{{ item.paperName }}</div>
                            <div class="exam-info">
                                <div class="exam-info-item">总分：{{ item.paperTotalScore }}分</div>
                                <div class="exam-info-item">
                                    考试时长：{{ item.durationTime }}分钟
                                </div>
                                <div class="exam-info-item">
                                    考试时间：{{ item.examStartTime }} - {{ item.examEndTime }}
                                </div>
                            </div>
                        </div>
                        <div class="list-right">
                            <el-button v-if="item.examStatus === '0'" type="primary" class="start" @click="handleStart(item.sbId)">
                                考试
                            </el-button>
                            <el-button v-if="item.examStatus === '1'" type="primary" disabled class="start" @click="handleStart(item.sbId)">
                                已考
                            </el-button>
                        </div>
                    </li>
                </ul>
            </div>
            <!-- <div class="right-footer">
                <el-button type="primary" style="width: 180px; height: 46px" @click="goAnswer">
                    开始答题
                </el-button>
            </div> -->
        </div>
    </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { getExamList } from '@/api/login'
import { useUserinfoStore } from '@/stores/user'

const userStore = useUserinfoStore()
const router = useRouter()

getList()

let examList = ref([])
// 获取考试列表
async function getList() {
    let res = await getExamList()
    if (res.data.code === 0) {
        examList.value = res.data.data
    }
}
function handleStart(sbId) {
    router.push({
        path: '/tips',
        query: {
            sbId
        }
    })
}

let navIndex = ref(1)

function changeNav(idx) {
    navIndex.value = idx
}
</script>

<style lang="less" scoped>
.tips {
    display: flex;
    justify-content: space-between;
    .left {
        margin-right: 30px;
        .nav {
            margin-bottom: 45px;
            width: 360px;
            &-item {
                display: flex;
                justify-content: center;
                align-items: center;
                height: 96px;
                font-size: 24px;
                background-color: #d4e2f4;
                cursor: pointer;
            }
            &-item.active {
                background-color: #397efd;
                color: #fff;
            }
        }
        .student-info {
            padding: 20px;
            width: 360px;
            height: 240px;
            background-color: #fff;
            box-shadow: 0px 5px 9px 0px rgba(57, 126, 253, 0.0784);
            border-radius: 10px;
            .title {
                margin-bottom: 15px;
                padding-left: 20px;
                border-left: 6px solid #397efd;
                font-size: 22px;
                font-weight: bold;
            }
            .user-info {
                display: flex;
                .avatar {
                    margin-top: 14px;
                    margin-right: 20px;
                    width: 88px;
                    height: 109px;
                    .bg('pic');
                }
                &-text {
                    line-height: 45px;
                    font-size: 18px;
                    .line {
                        width: 210px;
                        .textoverflow();
                    }
                }
            }
        }
    }
    .right {
        position: relative;
        height: 100%;
        width: 1480px;
        background-color: #fff;
        box-shadow: 0 5px 9px 0 rgba(57, 126, 253, 0.0784);
        border-radius: 10px;
        &-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 30px;
            height: 80px;
            border-bottom: 1px solid #d8d8d8;
            .title {
                display: flex;
                align-items: center;
                font-size: 27px;
                &-icon {
                    margin-right: 15px;
                    width: 36px;
                    height: 36px;
                }
            }
            .list-search {
                display: flex;
                .search-item {
                    width: 350px;
                    height: 48px;
                    margin-right: 15px;
                }
                .search-btn {
                    width: 96px;
                    height: 48px;
                    background-color: #1889eb;
                }
            }
        }
        &-content {
            width: 100%;
            height: calc(100% - 130px);
            padding: 32px;
            overflow-y: auto;
            font-size: 21px;
            color: #333333;
            .exam-list {
                display: flex;
                flex-direction: column;
                &-item {
                    display: flex;
                    justify-content: space-between;
                    padding: 30px;
                    margin-bottom: 18px;
                    height: 138px;
                    border-radius: 6px;
                    border: 2px solid #ceccca;
                    .list-left {
                        width: 1200px;
                        .exam-title {
                            margin-bottom: 20px;
                            font-size: 24px;
                            color: #333333;
                            font-weight: bold;
                        }
                        .exam-info {
                            display: flex;
                            justify-content: space-between;
                            width: 770px;
                            &-item {
                                margin-right: 60px;
                                font-size: 14px;
                                color: #a2a3a5;
                            }
                        }
                    }
                    .list-right {
                        display: flex;
                        align-items: center;
                        .start {
                            width: 90px;
                            height: 50px;
                            background-color: #00c882;
                            font-size: 21px;
                        }
                        .score {
                            width: 90px;
                            height: 50px;
                            background-color: #397efd;
                            font-size: 21px;
                        }
                    }
                }
            }
        }
        &-footer {
            position: absolute;
            left: 0;
            right: 0;
            bottom: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: #fff;
            height: 80px;
            border-top: 2px solid #d8d8d8;
        }
    }
}
</style>
